<template>
  <div v-if="visible">
    <teleport to="body" >
    <div class="mask">
      <div class="maskContainer">
        <div class="maskContent">
          <div class="content">
            <div class="header">
              <div class="headerLeft">
                <a-dropdown :trigger="['click']">
                  <template #overlay>
                    <a-menu @click="handleTimeClick">
                      <a-menu-item key="2"> 本周 </a-menu-item>
                      <a-menu-item key="3"> 本月 </a-menu-item>
                    </a-menu>
                  </template>
                  <a-button>
                    {{ timeLabelText[softCheckParams.dateType] }}
                    <DownOutlined />
                  </a-button>
                </a-dropdown>
                &nbsp;
                <a-dropdown :trigger="['click']">
                  <template #overlay>
                    <a-menu @click="handleStatusClick">
                      <a-menu-item key="0"> 不合格 </a-menu-item>
                      <a-menu-item key="1"> 合格 </a-menu-item>
                    </a-menu>
                  </template>
                  <a-button>
                    {{ statusLabelText[softCheckParams.status] }}
                    <DownOutlined />
                  </a-button>
                </a-dropdown>
              </div>
              <div class="headerRight" @click="closeIt">
                <close-outlined />
              </div>
            </div>
            <div class="list">
              <div class="softchecklist">
                <div class="softColumn">
                  <div class="checkType">验收类型</div>
                  <div class="devicename">设备名称</div>
                  <div class="devicestatus">验收状态</div>
                  <div class="devicer">验收人</div>
                </div>
                <a-spin :spinning="listLoading" tip="Loading...">
                  <div class="listcontent">
                    <div class="softItem" v-for="item in yanshouList.list" :key="item.order">
                      <div class="checkType">{{ item.acceptType ||  item.acceptTyp}}</div>
                      <div class="devicename">{{ item.deviceName || item.deviceNam}}</div>
                      <div class="devicestatus" :style="{color:  item.status == 1 ? '#3DF29B':'red'}">{{ statusLabelText[item.status] }}</div>
                      <div class="devicer">{{ item.acceptUser || item.acceptUse}}</div>
                    </div>    
                </div>
                </a-spin>
                
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </teleport>
  </div>
</template>
<script setup>
import { CloseOutlined, DownOutlined } from "@ant-design/icons-vue"
import { reactive, toRef, onMounted, ref  } from "vue"
import { getData } from "../../../api/softManage"
const props = defineProps({
  visible: Boolean,
  dataList: {
    type: Array,
    default: []
  }
})
const listLoading = ref(false)
let visible = toRef(props, "visible")

console.log(visible)
const cancelDialog = defineEmits(["update:visible"])

const closeIt = () => {
  cancelDialog("update:visible", false)
}

onMounted(()=>{
  console.log("更新")
  getSoftCheck()
})
const yanshouList = reactive({
  list: []
})
const timeLabelText = {
  2: "本周",
  3: "本月"
}
const statusLabelText = {
  0: "不合格",
  1: "合格"
}
const softCheckParams = reactive({
  dateType: 2,
  status: 0
})
const handleTimeClick = ({ key }) => {
  softCheckParams.dateType = Number(key)
  getSoftCheck()
}
const handleStatusClick = ({ key }) => {
  softCheckParams.status = Number(key)
  getSoftCheck()
}
const getSoftCheck = async () => {
  listLoading.value = true
  getData("/security/safeAcceptList.json").then(res=>{
   const result = res.data.find(i=> i.dateType == softCheckParams.dateType && i.status == softCheckParams.status )
    yanshouList.list = result.data.result
  })
  listLoading.value = false
}
</script>
<style lang="less" scoped>
:deep(.ant-spin-nested-loading){
  height: calc(100% - 50px);
  .ant-spin-container{
    height: 100%;
  .listcontent{
    height: 100%;
  }
  }
}
:deep(.headerRight .anticon svg) {
  font-size: 20px;
  cursor: pointer;
  color: #32a2e9;
}
:deep(.ant-btn) {
  background: rgb(5, 25, 39);
  border-color: rgb(72, 131, 158);
  color: #fff;
}
.mask {
  height: 100%;
  width: 100%;
  background: rgba(0, 0, 0, 0.5);
  position: absolute;
  top: 0;
  left: 0;
  z-index: 100;

  .maskContainer {
    width: 100%;
    height: 100%;
    position: relative;
    .maskContent {
      height: 60%;
      width: 60%;
      background: url(../../../assets/siteSafety/dialogbg.jpg);
      background-size: 100% 100%;
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
      padding: 20px;
      .content {
        height: 100%;
        width: 100%;
        // background: green;
        .header {
          display: flex;
          justify-content: space-between;
          align-items: center;
        }
        .list {
          height: calc(~"100% - 32px");
        }
      }
    }
  }
}
.softchecklist {
  height: 100%;
  // height: 100%;
  padding: 4%;
  color: white;
  .softColumn {
    height: 50px;
    line-height: 50px;

    div {
      font-size: 24px;
    }
  }
  .softColumn,
  .softItem {
    text-align: center;
    display: flex;
    justify-content: space-between;
  }
  .checkType {
    width: 30%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: 20px;
  }
  .devicename {
    width: 20%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: 20px;
  }
  .devicestatus {
    width: 20%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: 20px;
  }
  .devicer {
    width: 20%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: 20px;
  }
  .listcontent {
    height: calc(~"100% - 60px");
    overflow: auto;
    margin-top: 10px;
    .softItem {
      //   height: 30px;
      //   line-height: 30px;
      padding: 1% 0;
    }
    .softItem:nth-child(2n + 1) {
      background: #217097;
    }
    .softItem:nth-child(2n) {
      background: none;
    }
  }
}
</style>